<template>
  <!-- :style="collapsed?'width:0.7rem;height: 100%;':'width:1.5rem;height: 100%;'" -->
  <div class="appBox">
    <MaNu :manuList="manuList"/>
    <div class="app-content">
      <div class="title">
        <div class="ldft">都有管理</div>
        <div class="right">
          <div class="image">头像&nbsp</div>
          <div class="unlogin">退出&nbsp</div>
          <div class="setbox">设置</div>
        </div>
      </div>
      <div class="body">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>
<script setup>
   import MaNu from "./components/Manu.vue";
   import {ref} from 'vue';
   import {PieChartOutlined,MailOutlined,DesktopOutlined,InboxOutlined,} from '@ant-design/icons-vue';
   const manuList = ref([])
   manuList.value = [
    {
          path:"/",
          name:"首页",
          component:PieChartOutlined
      },
      {
          path:"/blog",
          name:"博客",
          component:DesktopOutlined
      },
      {
        path:"/vxegrid",
        name:"VxeGrid",
        component:InboxOutlined
      },
      {
        path:"/pagecontent",
        name:"页面跳转",
        component:MailOutlined
      },
      {
        path:"/comtext",
        name:"子传父",
        component:InboxOutlined
      },
      {
        path:"/tooltip",
        name:"tooltip",
        component:InboxOutlined
      },
   ]

</script>

<style lang="less" scoped>
  .appBox {
    width: 100%;
    height: 100vh;
    display: flex;
    

    .menubox {
      height: 100vh;
      background-color: #001529;
    }
    
    .app-content{ 
      width: 100%;
      
      .title{
        width: 100%;
        display: flex;
        justify-content: space-between;

        .right{
          display: flex;
        }
      }
      .body{
        display: flex;
      }
  }
    
  }

</style>